<template>
  <el-card class="team-strength-analysis-card" shadow="never" v-if="teamStrengthAnalysisData">
    <template #header>
      <div class="card-header">
        <span>队伍实力分析</span>
      </div>
    </template>

    <div class="team-strength-analysis-content">
      <el-row :gutter="20">
        <!-- 主队实力分析 -->
        <el-col :span="12">
          <div class="team-analysis home">
            <h3 class="team-title">主队实力分析</h3>
            <el-table
              :data="[teamStrengthAnalysisData.home]"
              size="small"
              style="width: 100%"
              :show-header="false"
              :cell-style="{ padding: '8px 0' }"
            >
              <el-table-column width="120" label="队伍名称">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">队伍名称</div>
                    <div class="cell-value">{{ row?.teamgbname || '-' }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120" label="进攻能力">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">进攻能力</div>
                    <div class="cell-value">
                      {{ (row.offensive_score_norm_index * row.conversion_factor).toFixed(2) }}
                      <span v-if="row?.offensive_score_norm_index && row?.conversion_factor" class="conversion-factor">
                        ({{ row?.offensive_score_norm_index?.toFixed(2) || '-' }})
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120" label="防守能力">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">防守能力</div>
                    <div class="cell-value">
                      {{ (row.defensive_score_norm_index * row.conversion_factor).toFixed(2) }}
                      <span v-if="row?.defensive_score_norm_index && row?.conversion_factor" class="conversion-factor">
                        ({{ row?.defensive_score_norm_index?.toFixed(2) || '-' }})
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120" label="综合实力">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">综合实力</div>
                    <div class="cell-value">
                      {{ (row.overall_score_norm_index * row.conversion_factor).toFixed(2) }}
                      <span v-if="row?.overall_score_norm_index && row?.conversion_factor" class="conversion-factor">
                        ({{ row?.overall_score_norm_index?.toFixed(2) || '-' }})
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <!-- 客队实力分析 -->
        <el-col :span="12">
          <div class="team-analysis away">
            <h3 class="team-title">客队实力分析</h3>
            <el-table
              :data="[teamStrengthAnalysisData.away]"
              size="small"
              style="width: 100%"
              :show-header="false"
              :cell-style="{ padding: '8px 0' }"
            >
              <el-table-column width="120" label="队伍名称">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">队伍名称</div>
                    <div class="cell-value">{{ row?.teamgbname || '-' }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120" label="进攻能力">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">进攻能力</div>
                    <div class="cell-value">
                      {{ (row.offensive_score_norm_index * row.conversion_factor).toFixed(2) }}
                      <span v-if="row?.offensive_score_norm_index && row?.conversion_factor" class="conversion-factor">
                        ({{ row?.offensive_score_norm_index?.toFixed(2) || '-' }})
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120" label="防守能力">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">防守能力</div>
                    <div class="cell-value">
                      {{ (row.defensive_score_norm_index * row.conversion_factor).toFixed(2) }}
                      <span v-if="row?.defensive_score_norm_index && row?.conversion_factor" class="conversion-factor">
                        ({{ row?.defensive_score_norm_index?.toFixed(2) || '-' }})
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120" label="综合实力">
                <template #default="{ row }">
                  <div class="table-cell">
                    <div class="cell-label">综合实力</div>
                    <div class="cell-value">
                      {{ (row.overall_score_norm_index * row.conversion_factor).toFixed(2) }}
                      <span v-if="row?.overall_score_norm_index && row?.conversion_factor" class="conversion-factor">
                        ({{ row?.overall_score_norm_index?.toFixed(2) || '-' }})
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'TeamStrengthAnalysis',
  props: {
    teamStrengthAnalysisData: {
      type: Object,
      default: null
    }
  }
}
</script>

<style scoped>
.team-strength-analysis-card {
  margin-bottom: 20px;
}

.team-strength-analysis-content {
  padding: 10px 0;
}

.team-analysis {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.team-analysis.home {
  background-color: #f0f9ff;
}

.team-analysis.away {
  background-color: #fff7f0;
}

.team-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.table-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cell-label {
  font-size: 12px;
  color: #909399;
}

.cell-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.conversion-factor {
  font-size: 12px;
  color: #909399;
  margin-left: 5px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-weight: bold;
  color: #303133;
}
</style>